<template>
  <div class=" my-pay-stub">
    <div class="max-w header-card">
      <div class="header-card-list card">
        <div class="title-header ">
          <div class="title-header-test">发薪月份：</div>
          <div class="title-header-year">
            <el-date-picker style="width:auto" v-model="data.monthData" :editable="false" type="month"
              placeholder="请选择年/月" @change="select(data.monthData)" />
          </div>
          <div class="title-header-wage">
            <router-link class="router-link-active" :to="{ path: '/salaryHistory',query:{key:data.key} }" style="height:100%;width:100%"  :key="data.key" >
              <!-- <img class="wageImg" src="../../assets/list.png" />
              <span class="wage" >详情</span> -->
              <!-- <el-button class="primaryBtn" type="primary">历史薪资</el-button> -->
            </router-link>
          </div>
        </div>
        <div class="title-list">
          <div class="title-list-pay">
            <p class="salary-spec">本月实发工资</p>
            <p class="salary">{{ data.list.takehomepay || '---' }} <span>元</span></p>
          </div>
          <div class="title-list-problem">
            <div :class="data.hint ? 'problem2' : 'problem'">
              <img class="problem-img" src="../../assets/dialogue.png" />
              {{ data.iswrong ? '有异议' : data.hint ? '已确认' : '未确认' }}
            </div>
          </div>
        </div>
      </div>
      <div class="reminder" v-if="data.show">
        <img class="reminder_down" src="../../assets/count.png" />
        <p class="reminder_text">工资单属于敏感信息,请注意保密!</p>
        <img class="reminder_delete" src="../../assets/delete.png" @click="deleteShow" />
      </div>
    </div>
    <div :class="!data.hint && !data.iswrong ? 'max-w particulars' : 'max-w  particulars particulars2'">
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">公&nbsp;&nbsp;&nbsp;司：</p>
          <p class="particulars_list_details">{{data.list.company || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">姓&nbsp;&nbsp;&nbsp;名：</p>
          <p class="particulars_list_details">{{ data.list.personname || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">基本工资：</p>
          <p class="particulars_list_details">{{ data.list.basepays || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">加班费：</p>
          <p class="particulars_list_details">{{
    (Number(data.list.pacificovertimepay) + Number(data.list.weekendovertimepay)) || '暂无'
}}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">月度奖：</p>
          <p class="particulars_list_details">{{ data.list.monthlyaward || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">岗位津贴：</p>
          <p class="particulars_list_details">{{ data.list.postallowance || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">综合补贴：</p>
          <p class="particulars_list_details">{{ data.list.comprehensivesubsidy || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">其他收入：</p>
          <p class="particulars_list_details">{{ data.list.otherPay || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card  footing">
          <p class="send">本月应发合计 ：{{ data.list.salary || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">社&nbsp;&nbsp;&nbsp;保：</p>
          <p class="particulars_list_details">{{ +data.list.socialsecurity || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">公积金：</p>
          <p class="particulars_list_details">{{ data.list.housingfund || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">个&nbsp;&nbsp;&nbsp;税：</p>
          <p class="particulars_list_details">{{ data.list.individualincometax || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">工会费：</p>
          <p class="particulars_list_details">{{ data.list.tradeunion || '暂无' }}
          </p>
        </div>
      </div>
      <!-- <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">水电费：</p>
          <p class="particulars_list_details">{{ data.list.waterandelectricity || '暂无' }}</p>
        </div>
      </div>
      <div class="particulars_list">
        <div class="particulars_list_card">
          <p class="particulars_list_name">物业管理费：</p>
          <p class="particulars_list_details">{{ data.list.propertymanagementfee || '暂无' }}</p>
        </div>
      </div> -->
      <div class="particulars_list">
        <div class="particulars_list_card  footing">
          <p class="send">本月扣款合计 ：&nbsp;{{ data.list.withhold || '暂无' }}</p>
        </div>
      </div>
    </div>
    <!-- <div class="max-w timeToTip " v-if="!data.hint && !data.iswrong">
      <p class="timeToTip_count">工资条在<span style="color:#EE8F46;font-size:18px">{{ data.time }}</span>后自动确认!</p>
      <p class="timeToTip_hint">如果对本工资条有异议请及时进行反馈!</p>
    </div> -->
    <div class="max-w bottomButtn">
      <el-button class="bottomButtn_query" type="info" plain :disabled="data.iswrong||data.hint" @click="openClick">{{
    data.iswrong ? '有异议' : '有异议?'
}}</el-button>
      <el-button class="bottomButtn_confirm" type="warning" plain :disabled="data.hint" @click="confirmation">{{ data.hint ?
    '已确认' : '确认!'
}}</el-button>
    </div>
    <div class="max-w feedback" v-if="data.visiable" ref="dialog">
      <problem-feedback2 @getChildren="oncFun" @getChildrenConfirm="confirm" :id="data.id"></problem-feedback2>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from 'vue'
import { otherHrSalary, checkSalary2 } from '@/api/salaryApi'
import problemFeedback2 from '@/components/common/problemFeedback2'
import { ElMessage } from 'element-plus'


onMounted(() => {
  QueryString('key')
  salaryInfo()
})

const data = reactive({
  show: true,
  monthData: (new Date().getMonth() + 1 - 1 != 0 ? new Date().getFullYear() : new Date().getFullYear() - 1) + '-' + (new Date().getMonth() + 1 - 1 != 0 ? new Date().getMonth() + 1 - 1 : 12),
  visiable: false, // 错误信息的展示
  key: '', // 用户信息
  list: '', //信息列表
  id: null,  // 用户id
  hint: false, // 确认状态
  pushdate: '', //发送时间
  time: '', // 倒计时
  iswrong: false // 错误信息反馈状态
})
// 接收子组件传递的事件
const oncFun = (x, y) => {
  data.visiable = y
  watch(() => [data.visiable], () => {
    salaryInfo()
  })
}

//  reminder展示与隐藏
const deleteShow = () => {
  data.show = false
}

// 选择时间
const select = (monthData) => {
  // 如果不为空就执行后续操作
  var month
  if (monthData !== null) {
    if (monthData.getMonth() + 1 < 10) {
      month = '0' + (monthData.getMonth() + 1)
    } else {
      month = (monthData.getMonth() + 1)
    }
    data.monthData = monthData.getFullYear() + '-' + month
  } else {
    console.log('r')
  }
  salaryInfo()
}

// 接口调用
const salaryInfo = () => {
  // console.log(data.monthData)
  if (data.monthData != null) {
    var year = data.monthData.split('-')[0]
    var month = data.monthData.split('-')[1]
  }
  data.list = []
  otherHrSalary({
    key: data.key,
    salaryyear: year,
    salarymonth: month
  }).then(res => {
    console.log(res)
    if (res.salarylist.length > 0) {
      data.list = res.salarylist[0]
      data.id = res.salarylist[0].id
      data.pushdate = res.salarylist[0].pushdate
      data.list.basepays = (Number(data.list.basepay) +
        Number(data.list.funeralleave) +
        Number(data.list.maritalleave) +
        Number(data.list.payrollonpaidleave) +
        Number(data.list.funeralleave) +
        Number(data.list.holidaypay)) // 基本工资
      data.list.otherPay = (Number(data.list.middleshiftpay) +
        Number(data.list.ricesubsidies) +
        Number(data.list.subsidy) +
        Number(data.list.dutyfee) +
        Number(data.list.moneyaward) +
        Number(data.list.sickleave) +
        Number(data.list.maternityleave)) // 其他收入
      data.list.withhold = (Number(data.list.socialsecurity) +
        Number(data.list.housingfund) +
        Number(data.list.individualincometax) +
        Number(data.list.tradeunion)).toFixed(2) //扣款项合计

      if (res.salarylist[0].isconfirmed == 'Y' || res.salarylist[0].autoconfirm == 'Y') {
        data.hint = true
        data.iswrong = true
      } else {
        data.hint = false
      }
      if (res.salarylist[0].iswrong == 'Y') {
        data.iswrong = true
      } else {
        data.iswrong = false
      }
    }
  })
}

// 有异议；打开弹框
const openClick = () => {
  data.visiable = true
}

// 获取网址的key
const QueryString = (val) => {
  var uri = window.location.href;
  var re = new RegExp("[?&]" + val + "=([^&?]*)", "ig");
  data.key = decodeURIComponent ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 2)) : null)
  console.log(data.key)
}

// 实发工资确认
const confirmation = () => {
  checkSalary2({ id: data.id }).then(res => {
    // console.log(res)
    if (res.statusCode == 200) {
      ElMessage('实发薪资已确定无误！！')
      salaryInfo()
      data.disbled = true
      // console.log(data.hint)
    }
  })
}



</script>

<style scoped lang="scss">
@import "index.scss";
</style>
